<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <!--// Meta Tags //-->
    <meta charset="UTF-8">
    <link href="http://dooring.cn/uploads/logo_1742fd359da.png" rel="shortcut icon" type="image/vnd.microsoft.icon">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Dooring是一款功能强大，专业可靠的H5可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。">
    <meta name="keywords" content="H5编辑器,表单设计,可视化,代码编辑器,H5,HTML5,javascript,react,nodejs,前端开发,github,开源">
    <meta name="author" content="徐小夕">
    <!-- <meta name="robots" content="noindex, nofollow"> -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="sogou_site_verification" content="fvU1Vcgpcc"/>
    <meta name="baidu-site-verification" content="code-UskzpXvPYv" />
    <title>H5数据可视化搭建平台</title>
    <!--// FrameWorks //-->
    <link rel="stylesheet" href="./css/frameworks.css">
    <!--// Theme Main Js //-->
    <link rel="stylesheet" href="./css/style.css">
</head>

<body data-spy="scroll" data-target="#fixedNavbar" data-offset="0">
    <!--// Page Wrapper Start //-->
    <div class="page-wrapper" id="home">
        <!-- Header Start -->
        <header class="header">
            <div class="container">
                <nav class="navbar navbar-expand-lg">
                    <a class="navbar-brand" href="/">
                        H5-Dooring
                    </a>
                    <!--// .logo //-->
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#fixedNavbar" aria-controls="fixedNavbar" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="togler-icon-inner">
                            <span class="line-1"></span>
                        <span class="line-2"></span>
                        <span class="line-3"></span>
                        </span>
                    </button>
                    <div class="collapse navbar-collapse main-menu justify-content-end" id="fixedNavbar">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link active" href="#" data-scroll-nav="0">首页</a>
                            </li>
                            <li class="nav-item">
                              <a class="nav-link" href="#" data-scroll-nav="1">特点</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" data-scroll-nav="2">介绍</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" data-scroll-nav="4">问题反馈</a>
                            </li>
                        </ul>
                    </div>
                </nav>
                <!--// .navbar-nav //-->
            </div>
            <!--// .container //-->
        </header>
        <!--// Header End  //-->

        <!--// Hero Section Start //-->
        <section class="hero-section" data-scroll-index="0">
            <div class="container h-100">
                <div class="row align-items-center h-100">
                    <div class="col-lg-7 col-md-10 col-sm-12">
                        <h1 class="hero-section-title wow fadeInUp" data-wow-delay="0.2s">
                            让H5制作，更方便
                        </h1>
                        <p class="hero-section-subtitle wow fadeInUp" data-wow-delay="0.3s">
                            H5-Dooring是一款功能强大，高可扩展的H5可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。
                        </p>
                        <a href="http://h5.dooring.cn/h5_plus" target="_blank" class="default-outline-btn wow fadeInUp" data-wow-delay="0.4s">立即使用</a>
                        <a href="http://h5.dooring.cn/uploads/WechatIMG3_1758e9753e2.jpeg" style="margin-left: 10px" target="_blank" class="default-outline-btn wow fadeInUp" data-wow-delay="0.4s">GPL商业授权+私有化部署</a>
                        <a href="https://github.com/MrXujiang/h5-Dooring" target="_blank" class="default-video-btn github wow fadeInUp">Github</a>
                    </div>
                    <!--// .col //-->
                    <div class="col-lg-4 text-right wow fadeInRight" style="overflow:hidden;padding:0;margin-left: 30px">
                        <img src="./img/face_p.png" alt="Hero image" style="height: 528px; border-radius: 32px">
                    </div>
                    <!--// .col //-->
                </div>
                <!--// .row //-->
            </div>
        </section>
        <!--// Hero Section End  //-->

        <!--// Services Section Start //-->
        <section class="services section-padding" data-scroll-index="1" id="services-area">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-7">
                        <div class="section-heading">
                            <h2 class="section-title">产品 <span>特点</span></h2>
                            <p class="section-sub-title">
                                通过不断打磨和迭代，致力于打造功能更强大，操作更便捷的H5营销工具
                            </p>
                        </div>
                    </div>
                    <!--// .col //-->
                </div>
                <!--// .row //-->
                <div class="row align-items-center justify-content-center">
                    <div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.1s">
                        <div class="services-item item-shadow">
                            <div class="services-icon services-blue-icon">
                                1
                            </div>
                            <div class="services-body">
                                <h5>简单方便</h5>
                                <p>
                                    任何人只需要傻瓜式拖拽或进行简单编辑即可生成精美的H5页面
                                </p>
                            </div>
                        </div>
                    </div>
                    <!--// .col //-->
                    <div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.3s">
                        <div class="services-item item-shadow">
                            <div class="services-icon">
                                2
                            </div>
                            <div class="services-body">
                                <h5>插拔式体验</h5>
                                <p>
                                    产品以GPL协议开源，可植入任何系统，并支持二次开发
                                </p>
                            </div>
                        </div>
                    </div>
                    <!--// .col //-->
                    <div class="col-lg-4 col-md-6 col-sm-6 services-resp-margin wow fadeInUp" data-wow-delay="0.3s">
                        <div class="services-item item-shadow">
                            <div class="services-icon">
                                3
                            </div>
                            <div class="services-body">
                                <h5>持续迭代，无限可能</h5>
                                <p>
                                    目前正在持续迭代中，后续可根具需求开发功能更强大的可视化系统.
                                </p>
                            </div>
                        </div>
                    </div>
                    <!--// .col //-->
                </div>
                <!--// .row //-->
            </div>
            <!--// .container //-->
        </section>
        <!--// Services Section End //-->

        <!--// About Section Start //-->
        <section class="about section-padding" data-scroll-index="2" id="about">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-8 col-lg-8 wow fadeInLeft text-left">
                        <img src="./img/f1.png" alt="About image" class="img-fluid img-jump">
                    </div>
                    <!--// .col //-->
                    <div class="col-md-4 col-lg-4 wow fadeInUp">
                        <div class="about-inner">
                            <span class="section-badge">场景展示</span>
                            <h3>拖拽式生成H5页面</h3>
                            <p>
                                通过轻松拖拽的方式来快速生成H5页面元素，并提供丰富的页面组件，更方便的为使用者搭建更强大的H5落地页
                            </p>
                        </div>
                        <div class="about-list">
                            <ul>
                                <li><i class="fa fa-check">1</i>产品营销页面</li>
                                <li><i class="fa fa-check">2</i>企业/个人微官网</li>
                                <li><i class="fa fa-check">3</i>产品原型/H5活动页面</li>
                            </ul>
                        </div>
                        <a href="http://h5.dooring.cn/h5_plus" class="default-btn">立即使用 
                            <i class="ml-2 fa fa-angle-right"></i>
                        </a>
                    </div>
                    <!--// .col //-->
                </div>
                <!--// .row //-->
            </div>
            <!--// .container //-->
        </section>
        <!--// About Section End //-->

        <!--// Features Section Start //-->
        <section id="features" class="features-section section-padding" data-scroll-index="3">
            <div class="container">
                <div class="features-row">
                    <div class="row align-items-center justify-content-between">
                        <div class="col-md-7 col-lg-6 wow fadeInLeft">
                            <div class="features-inner">
                                <span class="section-badge">场景展示</span>
                                <h3>自由缩放视图，多模式预览页面</h3>
                                <p>
                                    自由拖拽，灵活缩放视图，支持H5长页面，移动端真机预览，PC端模拟预览，最大限度的降低使用成本
                                </p>
                                <ul class="features-list">
                                    <li class="d-flex align-items-center">
                                        <i class="mdi">4</i>
                                        <div class="features-box">
                                            <h6>移动端适配</h6>
                                            <span>适配不同移动端机型，实时可调整，预览无压力</span>
                                        </div>
                                    </li>
                                    <li class="d-flex align-items-center">
                                        <i class="mdi">5</i>
                                        <div class="features-box">
                                            <h6>持续升级</h6>
                                            <span>定期根据用户需求进行系统升级，优化，创造更好的体验</span>
                                        </div>
                                    </li>
                                    <li class="d-flex align-items-center">
                                        <i class="mdi">6</i>
                                        <div class="features-box">
                                            <h6>实时下载</h6>
                                            <span>用户不用担心存储问题，可在平台直接下载对应代码或json文件，更灵活的使用</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!--// .col //-->
                        <div class="col-md-5 col-lg-5 text-center features-image-resp wow slideInRight">
                            <div class="features-circle"></div>
                            <div class="feature-image-wrap wow zoomIn" data-wow-delay="0.8s">
                                <img src="./img/f2.png" alt="About image" class="img-fluid img-jump">
                            </div>
                        </div>
                        <!--// .col //-->
                    </div>
                    <!--// .row //-->
                </div>
                
            </div>
            <!--// .container //-->
        </section>
        <!--// Features Section Start //-->

        <!--// How It Works Section End //-->

        <!--// Contact Section Start //-->
        <section class="contact-section section-padding" data-scroll-index="4">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <div class="section-heading">
                            <h2 class="section-title">问题<span>反馈</span></h2>
                            <p class="section-sub-title">
                                如果在使用过程中有任何疑问或者需求，可以通过以下方式联系到作者
                            </p>
                            <div style="text-align:center;margin-top:20px;width:240px;display:inline-block"><img src="./img/code.png" alt="趣谈前端" style="width:180px"></div>
                        </div>
                    </div>
                    <!--// .col //-->
                </div>
            </div>
            <!--// .container //-->
        </section>
        <!--// Contact Section End //-->

        <!--// Footer Section Start //-->
        <footer class="footer">
            <!--// .footer-top //-->
            <div class="copyright">
                <div class="container">
                    <div class="row align-items-center justify-content-center">
                        <div class="col-lg-9">
                            <p class="text-center">
                                © Copyright <span id="fullYearCopyright"></span> - 徐小夕
                                <a style="margin-left:20px" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">鄂ICP备18024675号-3</a>
                            </p>
                        </div>
                    </div>
                    <!--// .row //-->
                </div>
                <!--// .container //-->
            </div>
            <!--// .copyright //-->
        </footer>

        <!--// Footer Section Start //-->
        <a href="#0" class="scroll-top-btn" data-scroll-goto="0">
          🔝
        </a>
        <!--// Scroll Top //-->

        <div class="preloader-wrap">
            <div class="preloader-inner">
                <div class="sk-circle"></div>
                <div class="spinner">
                    <div class="rect1"></div>
                    <div class="rect2"></div>
                    <div class="rect3"></div>
                    <div class="rect4"></div>
                    <div class="rect5"></div>
                </div>
            </div>
        </div>
        <!--// Preloader  //-->
        
    </div>
    <!--// Page Wrapper End //-->

    <!--// jQuery v3.4.1 //-->
    <script src="./js/jquery.js"></script>
    <!--// Plugins Js //-->
    <script src="./js/plugins.js"></script>
    <!--// Main Js //-->
    <script src="./js/main.js"></script>
</body>

</html>